<template>
	<view class="my-point">
		<u-navbar title=" " bgColor="transparent" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#fff"></uni-icons></view>
			<view slot="center" style="color:#fff">
				我的余额
			</view>
		</u-navbar>
		<view class="top" :style="{background:`url(${imgUrl}balanceBg.png) no-repeat`}">
			<view class="point-num">
				<h2>我的余额</h2>
				<p>
					{{userInfo.balance}}
					<!-- <span @click="toPage('/package/pages/pointShop/pointShop')">
						去兑换<u-icon name="arrow-right" size="10" color="#fff"></u-icon>
					</span> -->
				</p>
			</view>
			<!-- 		<view class="getPoint" @click="goGetPoint()">
				获取积分
			</view> -->
		</view>
		<view class="pointBox">
			<view class="pointTitle flex_heng">
				<view class="dian">
				</view>
				<text>余额明细</text>
				<view class="dian">
				</view>
			</view>
			<view class="pointItem flex_heng" v-for="(item,index) in integralList" :key="index">
				<view class="pointLeft flex_shu">
					<view class="u-line-1">
						{{item.type == 1?'充值':item.type == 2?'消费':'兑换'}}
					</view>
					<view class="time">
						{{item.createTime}}
					</view>
				</view>
				<view class="pointRight flex_heng">
					<image :src="imgUrl+ 'bao1.png'" mode=""></image>
					{{item.type == 1?'+':item.type == 2?'-':'+'}}{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getIntegralList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				allIntegral: {},
				page: 1,
				total: 0,
				sortId: '',
				integralList: [],
				userInfo: {},
			}
		},
		onShow() {
			// this.getHomeTypeList()
			this.getUserInfo()
			this.pageNum = 1;
			this.integralList = [];
			this.getIntegralList();
		},
		onReachBottom() {
			this.pageNum += 1;
			this.getIntegralList();
		},
		methods: {
			//获取积分
			goGetPoint() {
				uni.navigateTo({
					url: '/package/pages/getPoint/getPoint'
				})
			},

			getUserInfo() {
				getUserInfo().then(res => {
					console.log(res);
					this.userInfo = res.data
				})
			},

			getIntegralList(userIntegral) {
				getIntegralList({
					pageNum: this.pageNum,
					pageSize: 50,
				}).then(res => {
					if (res.code == 200) {
						this.allIntegral = res.data
						if (res.rows.length > 0) {
							this.integralList = [...this.integralList, ...res.rows];
						}
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
				})
			},

			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},



			handleTab(e) {
				this.defultCurrent = this.tabsList.findIndex(item => item.id == e.id)
				this.page = 1;
				this.goodsList = [];
				this.getIntegralList({
					sortId: e.id
				})
			},
			handleSort(index) {
				console.log('点击二级排序', index);
				this.sortCurrent = index
				if (index == 1) {
					this.isUp = null
					this.page = 1;
					this.goodsList = [];
					this.getIntegralList({
						userIntegral: this.userInfo.integral
					})
				} else {
					this.isUp = 1
				}
			},
			handlePointSort() {
				console.log(this.isUp);
				this.sortCurrent = 0
				if (this.isUp == 1) {
					this.$set(this, 'isUp', 2)
				} else if (this.isUp = 2) {
					this.$set(this, 'isUp', 1)
				}
				console.log('点击后', this.isUp);

				this.page = 1;
				this.goodsList = [];
				this.getIntegralList({})
			},
			scrolltolower() {
				console.log('到底了');
				this.page += 1
				this.moreStatus = 'loadmore'
				if (this.sortCurrent === 1) {
					this.getIntegralList({
						userIntegral: this.userInfo.integral
					})
				} else {
					this.getIntegralList({})
				}
			},
		}
	}
</script>

<style lang="scss">
	.my-point {
		width: 100%;
		height: 100vh;
		background: #f6f6f6;
		position: relative;

		.top {
			width: 100%;
			height: 590rpx;
			background-size: 100% 100% !important;
			padding-top: 186rpx;
			box-sizing: border-box;

			.point-num {
				padding-left: 33rpx;
				box-sizing: border-box;

				h2 {
					color: #ffffff;
					font-size: 32rpx;
					font-weight: 400;
				}

				p {
					display: flex;
					align-items: baseline;
					color: #ffffff;
					font-size: 84rpx;
					font-weight: 600;

					span {
						display: flex;
						align-items: center;
						color: #ffffff;
						font-size: 28rpx;
						font-weight: 500;
						transform: translateX(50rpx);
					}
				}
			}

			.getPoint {
				margin-top: 12rpx;
				width: 168rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 178rpx;
				opacity: 1;
				background: #ffffff;
				color: #007fff;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 33rpx;
				box-sizing: border-box;
			}
		}

		.pointBox {
			width: 694rpx;
			// height: 456rpx;
			border-radius: 16rpx;
			opacity: 1;
			background: #ffffff;
			position: absolute;
			top: 440rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 28rpx;
			box-sizing: border-box;

			.pointTitle {
				width: 100%;
				justify-content: center;
				align-items: center;

				.dian {
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background: linear-gradient(-60.9deg, #ffd9d9 0%, #ff767600 100%);
					margin: 0 8rpx;
				}

				text {
					color: #FF483C;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
				}
			}

			.pointItem {
				width: 100%;
				height: 130rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid #dedede;

				.pointLeft {
					height: 130rpx;
					color: #000000;
					font-size: 28rpx;
					font-weight: 500;
					align-items: flex-start;
					justify-content: space-evenly;

					.time {
						color: #666666;
						font-weight: 300;
						font-size: 20rpx;
					}
				}

				.pointRight {
					height: 130rpx;
					color: #FF483C;
					font-size: 32rpx;
					font-weight: 500;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
</style>